<%--
  Created by IntelliJ IDEA.
  User: HUAWEI
  Date: 2022/11/25
  Time: 20:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>管理平台</title>
  <!-- layui库的css引入 -->
  <link rel="stylesheet" href="./layui/css/layui.css">
  <!-- 自己的css引入 -->
  <link rel="stylesheet" href="./css/index.css">
  <!--  -->
  <script src="./js/index.js"></script>
</head>
<body>
<!-- 容器哦 -->
<div class="layui-fluid">
  <!-- 第一行 -->
  <div class="layui-row">
    <!-- 行中第一列 -->
    <div class="layui-col-md10">
      <span class="logo">智慧社区服务管理后台</span>

    </div>
    <!-- 行中的第一列  结束-->

    <!-- 行中的第二列 -->
    <div class="layui-col-md2">
      <ul class="layui-nav layui-bg-blue">
        <li class="layui-nav-item">
          <a href="javascript:;">个人中心<span class="layui-badge-dot"></span></a>
        </li>
        <li class="layui-nav-item">
          <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">${sessionScope.username}</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="/logout" id="logout">退出登录</a></dd>
          </dl>
        </li>
      </ul>
    </div>
    <!-- 行中的第二列 结束-->
  </div>
  <!-- 第一行 结束-->

  <!-- 第二行 -->
  <div class="layui-row hightsizebox">
    <!-- 第二行中第一列 -->
    <div class="layui-col-md2 two-hightsize-one">
      <ul class="layui-nav layui-nav-tree nav-boxsize" lay-filter="test">
        <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
        <li class="layui-nav-item layui-nav-itemed layui-nav-child-c">
          <a href="javascript:;">业务功能</a>
          <dl class="layui-nav-child dl-box">
            <dd><a href="javascript:;">账号密码管理</a></dd>
            <dd><a href="javascript:;">社区人员信息</a></dd>
            <dd><a href="javascript:;">回到首页</a></dd>
          </dl>
        </li>

        <li class="layui-nav-item layui-nav-child-c "><a href="javascript:;" class="gonggao">公告管理</a></li>
        <li class="layui-nav-item layui-nav-child-c"><a href="javascript:;" class="guanyuwomen">关于我们</a></li>
      </ul>
    </div>
    <!-- 第二行中第一列 结束-->

    <!-- 第二行中第二列 -->
    <div class="layui-col-md10 two-hightsize-two">
      <ul class="two-row-two">
        <!-- 内容一 -->
        <li class="hidden">
          <table id="demoone" lay-filter="testone"></table>
          <button type="button" class="layui-btn" id="adduser" style="width: 100%">添加</button>

        </li>
        <!-- 内容二 -->
        <li  class="hidden">
          <div class="layui-container two-container-row">
            <table id="demothree" lay-filter="testthree"></table>
            <button type="button" class="layui-btn" id="addusermsg" style="width: 100%">添加</button>
          </div>

        </li>
        <!--首页  -->
        <li  class="show">
          <div class="layui-container two-container-row dd">

            <div class="layui-row row-box-h">
              <h2>欢迎管理员${sessionScope.username}进入智慧社区服务管理后台</h2>

            </div>


          </div>
        </li>
        <!-- 内容四 -->
        <li class="hidden">
          <table id="demotwo" lay-filter="testtwo"></table>
          <button type="button" class="layui-btn" id="addmsg" style="width: 100%">添加</button>
        </li>
        <!-- 内容五 -->
        <li class="hidden">
          <div class="layui-container two-container-row dd">
            <div class="layui-row">
              <div class="layui-collapse">
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">作者</h2>
                  <div class="layui-colla-content layui-show">20计科一班阮国真，有问题请联系作者;电话：**********；QQ：************；电子邮箱：1256382146@qq.com</div>
                </div>
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">疫情介绍</h2>
                  <div class="layui-colla-content layui-show">（一）对密切接触者，将“7天集中隔离+3天居家健康监测”管理措施调整为“5天集中隔离+3天居家隔离”，期间赋码管理、不得外出。集中隔离医学观察的第1、2、3、5天各开展1次核酸检测，居家隔离医学观察第1、3天各开展1次核酸检测。

                    （二）及时准确判定密切接触者，不再判定密接的密接。

                    （三）将高风险区外溢人员“7天集中隔离”调整为“7天居家隔离”，期间赋码管理、不得外出。在居家隔离第1、3、5、7天各开展1次核酸检测。

                    （四）将风险区由“高、中、低”三类调整为“高、低”两类，最大限度减少管控人员。原则上将感染者居住地以及活动频繁且疫情传播风险较高的工作地和活动地等区域划定为高风险区，高风险区一般以单元、楼栋为单位划定，不得随意扩大；高风险区所在县（市、区、旗）的其他地区划定为低风险区。高风险区连续5天未发现新增感染者，降为低风险区。符合解封条件的高风险区要及时解封。</div>
                </div>
                <div class="layui-colla-item">
                  <h2 class="layui-colla-title">系统介绍</h2>
                  <div class="layui-colla-content layui-show">随着科学技术的飞速发展，社会的方方面面、各行各业都在努力与现代的先进技术接轨，通过科技手段来提高自身的优势，社区疫情防控管理信息系统当然也不能排除在外。社区疫情防控管理信息系统是以实际运用为开发背景，运用软件工程开发方法，采用jsp技术构建的一个管理系统。整个开发过程首先对软件系统进行需求分析，得出系统的主要功能。接着对系统进行总.体设计和详细设计。总.体设计主要包括系统总体结构设计、系统数据结构设计、系统功能设计和系统安全设计等;详细设计主要包括模块实现的关键代码，系统数据库访问和主要功能模块的具体实现等。最后对系统进行功能测试，并对测试结果进行分析总结，及时改进系统中存在的不足，为以后的系统维护提供了方便，也为今后开发类似系统提供了借鉴和帮助。
                    本社区疫情防控管理信息系统采用的数据库是Mysql，使用JSP技术开发。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。
                    关键词:社区疫情防控管理信息系统，JSP技术，Mysq1 数据库
                  </div>
                </div>
              </div>
            </div>

            <div class="layui-row photo">
              <!-- 放一张装饰的照片 -->
            </div>
          </div>
        </li>


      </ul>
    </div>
    <!-- 第二行中第二列  结束-->

  </div>
  <!-- 第二行 结束-->
</div>
<!-- 容器结束 -->

<!-- 引入layui库js文件 -->
<script src="./layui/layui.js"></script>
<script>
  layui.use(['table','carousel','layer','form','jquery'], function(){
    var table = layui.table;
    var $=layui.$;
    var carousel = layui.carousel;
    var layer = layui.layer;
    var form = layui.form;

    //执行方法渲染 成员账号信息表
    let table_close= table.render({
      elem: '#demoone'
      ,height: 'full-150' //容器高度
      ,page:false
      ,even:true
      ,cols: [[ //表头
        {templet: function(d){
            // console.log(d);
            return d.LAY_INDEX},title: '序号', width:80, sort: true, fixed: 'left'}
        ,{field: 'id', title: 'id',width:80 ,sort: true,hide:true}
        ,{field: 'username', title: '账号',width:300}
        ,{field: 'password', title: '密码', sort: true}
        ,{field: 'state', title: '身份', width:80}
        ,{ title: '功能', width:150, align:'center', toolbar: '#barDemo'}
      ]] //设置表头
      ,url: '/user' //设置异步接口
    });

    //添加按钮 用户信息账号密码
    document.querySelector("#adduser").addEventListener("click",function (){
      layer.open({
        type:2,
        title:'信息',
        skin: 'layui-layer-molv',
        area: ['500px', '600px'],
        shade:0.3,
        closeBtn:2,
        content: '/web/adduserform.html',
        end : function(index, layero){//关闭弹出层后调用
          // var body = layer.getChildFrame('body', index);//获取当前弹出层的body
      /*    if (body.text()=="ok"){
            layer.close(layer.index);
            table.reload('demoone');//关闭层后重新渲染数据
          }*/
          layer.close(layer.index);
          table.reload('demoone');//关闭层后重新渲染数据
          return false;
        }

      });
    });


    //工具条事件  用户信息表  账号密码
    table.on('tool(testone)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值） 对应 事件的name
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

      if(layEvent === 'edit'){ //编辑
        console.log(data);
        layer.open({
          type: 2,
          area: ['500px', '800px'],
          content: '/web/updateuserform.jsp'
          ,success: function(layero, index){
            let id =data.id;
            let username =data.username;
            let password =data.password;
            let state = data.state;


            var body = layer.getChildFrame('body', index);
            // var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();

            body.find('.hidden').val(id);
            body.find('input[name=username]').val(username);
            body.find('input[name=password]').val(password);
            if (state==1){
              body.find('input[name=switch]').prop("checked",true);
              body.find('.layui-form-switch').addClass("layui-form-onswitch");
            }
            // console.log(body.text()) ;//得到iframe页的body内容
            if (body.text()=="ok"){
              layer.close(layer.index);
              table.reload('demoone');//关闭层后重新渲染数据
            }
          }
        });

        //do somehing
      } else if(layEvent === 'del'){ //删除
        layer.confirm('真的删除行么', function(index){
          obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
          layer.close(index);
          //向服务端发送删除指令
          let id =data.id;//获取当前行的id;
          // console.log(id);
          //用ajax向后台发送需要删除的id
          let xhr=new XMLHttpRequest();
          xhr.open('get','/userupdate?id='+id);
          xhr.send();
          xhr.onreadystatechange=function (){
            if (xhr.readyState==4&&xhr.status==200){
              console.log(xhr.responseText);
            }
          }
        });
      }})

    //公告栏表格
    var tableIns = table.render({

      elem: '#demotwo'
      ,height: 500 //容器高度
      ,page:false
      ,even:true
      ,cols: [[ //表头
        {templet: function(d){
            // console.log(d);
            return d.LAY_INDEX},title: 'ID', width:80, sort: true, fixed: 'left'}
        ,{field: 'mid', title: 'id',width:80 ,sort: true,hide:true}
        ,{field: 'header', title: '标题', width:150}
        ,{field: 'msgtype', title: '公告类型', width:200, sort: true}
        ,{field: 'msgmember', title: '公告成员', width:100}
        ,{field: 'msgtext', title: '主题内容'}
        ,{field: 'timer', title: '发布时间', width: 280, sort: true}

        ,{ title: '查看', width:150, align:'center', toolbar: '#barDemo'}

      ]] //设置表头
      ,url: '/usermsg' //设置异步接口

    });


    //工具条事件  公告表
    table.on('tool(testtwo)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值） 对应 事件的name
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

      if(layEvent === 'edit'){ //编辑
        console.log(data);
        layer.open({
          type: 2,
          skin: 'layui-layer-molv',
          area: ['500px', '600px'],
          content: '/web/msgform.html'
          ,success: function(layero, index){
            let id =data.mid;
            let header =data.header;
            let msgtype =data.msgtype;
            let msgmember = data.msgmember;
            let msgtext = data.msgtext;


            var body = layer.getChildFrame('body', index);
            // var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();

            body.find('input[name=id]').val(id);
            body.find('input[name=title]').val(header);
            body.find('textarea[name=desc]').val(msgtext);
            body.find('input[name=msgmembercope]').val(msgmember);
            body.find('input[name=msgtypecope]').val(msgtype);

            if (body.text()=="ok"){
              layer.close(layer.index);
              table.reload('demotwo');
              //关闭层后重新渲染数据
            }
          }
        });

        //do somehing
      } else if(layEvent === 'del'){ //删除
        layer.confirm('真的删除行么', function(index){
          obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
          layer.close(index);
          //向服务端发送删除指令
          let id =data.mid;//获取当前行的id;
          console.log(data);
          console.log(id);
          //用ajax向后台发送需要删除的id
          let xhr=new XMLHttpRequest();
          xhr.open('get','/updatemsg?id='+id);
          xhr.send();
          xhr.onreadystatechange=function (){
            if (xhr.readyState==4&&xhr.status==200){
              console.log(xhr.responseText);
            }
          }
          table.reload('demotwo');
        });
      }})

    //添加按钮 公告表
    document.querySelector("#addmsg").addEventListener("click",function (){
      var index = layer.open({
        type:2,
        title:'信息',
        skin: 'layui-layer-molv',
        area: ['500px', '600px'],
        shade:0.3,
        closeBtn:2,
        content: '/web/addmsgform.html',
        cancel : function(index, layero){//关闭弹出层后调用
          var body = layer.getChildFrame('body', index);//获取当前弹出层的body
          if (body.text()=="ok"){
            layer.close(layer.index);
            table.reload('demotwo');//关闭层后重新渲染数据
          }
          layer.close(layer.index);
          return false;
        }

      });
    });



    //执行方法渲染 成员信息表
    let table_usermsg= table.render({
      elem: '#demothree'
      ,height: 550 //容器高度
      ,page:false
      ,even:true
      ,cols: [[ //表头
        {templet: function(d){
            // console.log(d);
            return d.LAY_INDEX},title: '序号', width:80, sort: true, fixed: 'left'}
        ,{field: 'id', title: 'id',width:80 ,sort: true,hide:true}
        ,{field: 'name', title: '名字',width:300}
        ,{field: 'age', title: '年龄', sort: true}
        ,{field: 'checkstatus', title: '健康码状态', width:180}
        ,{field: 'state', title: '是否接种', width:180}
        ,{field: 'sex', title: '性别', width:80}
        ,{ title: '功能', width:150, align:'center', toolbar: '#barDemo'}
      ]] //设置表头
      ,url: '/getmsg' //设置异步接口
    });


    //添加按钮 用户信息表
    document.querySelector("#addusermsg").addEventListener("click",function (){
      var index = layer.open({
        type:2,
        title:'信息',
        skin: 'layui-layer-molv',
        area: ['500px', '600px'],
        shade:0.3,
        closeBtn:2,
        content: '/web/addusermsgform.html',
        cancel : function(index, layero){//关闭弹出层后调用
          var body = layer.getChildFrame('body', index);//获取当前弹出层的body
          if (body.text()=="ok"){
            layer.close(layer.index);
            table.reload('demothree');//关闭层后重新渲染数据
          }
          layer.close(layer.index);
          return false;
        }

      });
    });

    //工具条事件  用户信息表
    table.on('tool(testthree)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值） 对应 事件的name
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

      if(layEvent === 'edit'){ //编辑
        console.log(data);
        layer.open({
          type: 2,
          skin: 'layui-layer-molv',
          area: ['500px', '600px'],
          content: '/web/updateusermsgform.html'
          ,success: function(layero, index){
            let id =data.id;
            let name =data.name;
            let age =data.age;
            let checkstatus = data.checkstatus;
            let state = data.state;
            let sex = data.sex;



            var body = layer.getChildFrame('body', index);
            // var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();

            body.find('input[name=id]').val(id);
            body.find('input[name=name]').val(name);
            body.find('input[name=age]').val(age);
            // console.log(sex=="男"?true:false)
            body.find('input[value="男"]').prop("checked",sex=="男"?true:false);
            body.find('input[name=checkstatus]').val(checkstatus);
            body.find('input[name=checkstatus]').val(state);
            body.find('input[value="女"]').prop("checked",sex=="女"?true:false);
            if (state=="已接种"){
              body.find('input[name=switch]').prop("checked",true);
              body.find('.layui-form-switch').addClass("layui-form-onswitch");
            }

            if (body.text()=="ok"){
              layer.close(layer.index);
              table.reload('demothree');
              //关闭层后重新渲染数据
            }
          }
        });

        //do somehing
      } else if(layEvent === 'del'){ //删除
        layer.confirm('真的删除行么', function(index){
          obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
          layer.close(index);
          //向服务端发送删除指令
          let id =data.id;//获取当前行的id;
          console.log(data);
          console.log(id);
          //用ajax向后台发送需要删除的id
          let xhr=new XMLHttpRequest();
          xhr.open('get','/addmsg?id='+id);
          xhr.send();
          xhr.onreadystatechange=function (){
            if (xhr.readyState==4&&xhr.status==200){
              console.log(xhr.responseText);
            }
          }
          table.reload('demothree');
        });
      }})



  });
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs layui-bg-red " lay-event="del">删除</a>
  <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">修改</a>
</script>
</body>
</html>